import React from "react";
import { Layout, Typography, Button, Space, Table } from "antd";
import styles from "./index.module.less";

const { Title } = Typography;

interface MemberData {
  key: string;
  groupMember: string;
  role: string;
  borrowLend: string;
  action: React.ReactNode;
}

const MembersAndResources: React.FC = () => {
  const columns = [
    {
      title: "资源组-成员",
      dataIndex: "groupMember",
      key: "groupMember",
    },
    {
      title: "角色",
      dataIndex: "role",
      key: "role",
    },
    {
      title: "借入/借出",
      dataIndex: "borrowLend",
      key: "borrowLend",
    },
    {
      title: "操作",
      dataIndex: "action",
      key: "action",
    },
  ];

  const data: MemberData[] = [
    {
      key: "1",
      groupMember: "电子看板开发组",
      role: "",
      borrowLend: "",
      action: (
        <a href="#" data-oid="_yg79eu">
          解散
        </a>
      ),
    },
    {
      key: "2",
      groupMember: "王宇壮/80276430",
      role: "管理员",
      borrowLend: "--",
      action: (
        <a href="#" data-oid="i:.jj.8">
          移除
        </a>
      ),
    },
    {
      key: "3",
      groupMember: "胡剑波/IT008750",
      role: "成员",
      borrowLend: "--",
      action: (
        <a href="#" data-oid="41x8v3d">
          移除
        </a>
      ),
    },
  ];

  return (
    <Layout className={styles.container} data-oid="7-y4ywt">
      <div className={styles.header} data-oid="4nwyvpe">
        <Title level={4} data-oid="fpelt-y">
          成员及资源池组
        </Title>
        <Space data-oid="cwfk58i">
          <Button type="primary" data-oid="j3l:-6b">
            + 添加成员
          </Button>
          <Button type="primary" data-oid="pvtb9dk">
            + 新建资源组
          </Button>
        </Space>
      </div>
      <div className={styles.tableContainer} data-oid="b_owz15">
        <Table
          columns={columns}
          dataSource={data}
          pagination={false}
          bordered
          data-oid="kknmziu"
        />
      </div>
    </Layout>
  );
};

export default MembersAndResources;
